


const Child = ({element}) =>{

const data = [
    {
      id:1,
      song:"最佳损友"
    },
    {
      id:2,
      song:"富士山下"
    },
    {
      id:3,
      song:"与你同在"
    }
  ];
  return(
      <>
        {element(data)}
      </>
    )


};



const Demo5 = () => {
  const info = (data) =>{

    return(
          <ul>
              {data.map((item) =>{
                  return(
                        <li key={item.id}>{item.song}</li>
                    )
              })}
          </ul>
      )
  };
  return (
    <>
      <Child element={info}></Child>
    </>
  );
};

export default Demo5;



/**
 * 作用域插槽
 * 父组件定义函数传给子组件，而这个函数的参数值来自子组件中的，并且在子组件中调用
 */